<template>
  <div>
    <el-tabs v-model="activeTab" tab-position="left" style="width: 264px;height: 100%" @tab-click="handleTabClick">
      <!--组件-->
      <el-tab-pane name="widget">
        <span slot="label">
          <el-tooltip class="item" effect="dark" content="组件" placement="right">
            <svg-icon icon-class="vpd-cube"/>
          </el-tooltip>
        </span>

        <widget-pane></widget-pane>
      </el-tab-pane>
      <!--页面信息-->
      <el-tab-pane name="viewInfo">
        <span slot="label">
          <el-tooltip class="item" effect="dark" content="页面信息" placement="right">
            <i class="el-icon-setting"></i>
          </el-tooltip>
        </span>

        <view-info ref="viewInfo" :view="view"></view-info>
      </el-tab-pane>

      <!--页面结构-->
      <el-tab-pane name="structure">
        <span slot="label">
          <el-tooltip class="item" effect="dark" content="页面结构" placement="right">
            <svg-icon icon-class="vpd-tree"/>
          </el-tooltip>
        </span>

        <structure></structure>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import WidgetPane from './widgetPane';
  import ViewInfo from './viewinfo';
  import Structure from './structure';
  import vpd from '../../mixins/vpd';

  export default {
    mixins: [vpd],
    props: {
      view: {
        type: Object
      }
    },
    components: {
      WidgetPane,
      ViewInfo,
      Structure
    },
    data() {
      return {
        activeTab: 'widget',
      }
    },
    beforeMount() {
      this.$vpd.$on('viewInfo', () => {
        this.activeTab = 'viewInfo';
      })

    },
    methods: {
      handleTabClick(tab) {
        if (tab.name === 'viewInfo') {
          this.$refs.viewInfo.init();
        }
      }
    }
  }
</script>
<style lang="scss">
  .el-tabs--left {
    .el-tabs__header.is-left {
      margin-right: 0;
    }

    .el-tabs__item.is-left.is-active {
      background: #ebebeb;
    }

    .el-tabs__item.is-left {
      padding: 0 10px;
      font-size: 18px;
    }
  }


</style>
